<template>
    <section>
        <div
            style="width:100%; margin:100px auto 30px;  display: table; position: relative;"
        >
            <el-col align="right"
                style="position:absolute; top: -100px; right: 0"
            >
                <div class="section">
                    <span style="float:left; line-height:32px;font-size:24px; font-weight:bold; color:#333;">{{recordsData.check_unit_name}}检查作业</span>
                    <el-button type="primary" @click="submit">提交</el-button>
                    <el-button type="primary" plain @click="cancel">返回</el-button>
                </div>
                <br>
                <hr style="height:1px;border:none;border-top:1px solid #eceaea" />
            </el-col>

            <el-col>
                <div class="section">
                    <div class="head-item">
                        <div class="head-val">高校名称</div>
                        <div class="head-title">{{recordsData.check_unit_name}}</div>
                    </div>
                    <div class="head-item">
                        <div class="head-val">检查专家</div>
                        <div class="head-title">{{recordsData.check_user_name}}</div>
                    </div>
                    <div class="head-item">
                        <div class="head-val">检查项数量</div>
                        <div class="head-title">{{recordsData.check_desc_count}}</div>
                       <!-- <div class="head-val" style="margin-left: 20px">
                            <span class="cyc cyc-margin cyc-green">&nbsp;</span>
                            <span>{{recordsData.status_2_count}}</span>
                        </div>
                        <div class="head-val">
                            <span class="cyc cyc-margin cyc-orange">&nbsp;</span>
                            <span>{{recordsData.status_1_count}}</span>
                        </div>
                        <div class="head-val">
                            <span class="cyc cyc-margin cyc-red">&nbsp;</span>
                            <span>{{recordsData.status_0_count}}</span>
                        </div>-->
                    </div>
                </div>
                <hr style="height:1px;border:none;border-top:1px solid #eceaea;" />
            </el-col>
            <el-col>
                <div class="body-item" v-if="recordsData.suggestion">
                    <div class="body-title">综合意见</div>
                    <div class="body-val">
                        <el-input
                                :autosize="true"
                                type="textarea"
                                resize="none"
                                class="showTextConter"
                                v-model="recordsData.suggestion"
                                readonly>

                        </el-input>
                    </div>
                </div>
            </el-col>

            <el-col>
                <div class="body-item">
                    <div class="body-title">检查项</div>

                    <div v-for="item in recordsData.check_desc_list" class="body-inspect">
                        <div class="inspect-title">
                            <!--<span :class="'cyc cyc-' + formatCyc(item.check_content_status)"></span>
                            <span class="star">{{formatStar(item.star_level)}}</span>-->
                            <span>{{item.check_item_three_order_number + '.&nbsp;' + item.check_item_three }}</span>
                        </div>
                        <div class="inspect-info" v-if="item.image_list.length > 0">
                            <div class="info-title">图片</div>
                            <div class="info-img">
                                <img v-for="img in item.image_list" :src="fixUrl(img.path || img.url)"/>
                            </div>
                        </div>
                        <hr style="height:1px;border:none;border-top:1px solid #f8f8f8; margin-top:20px;" />
                        <div class="inspect-info" v-if="item.building_room.length > 0">
                            <div class="info-title">楼宇 - 房间号</div>
                            <div>
                                <el-tag  v-for="(lab, index) in item.building_room" :key="index" class="info-item" type="success" style="margin-right:15px;">{{lab.building}}</el-tag>
                            </div>
                        </div>
                        <hr style="height:1px;border:none;border-top:1px solid #f8f8f8; margin-top:30px;" />
                        <div class="inspect-info" v-if="item.desc">
                            <div class="info-title">描述信息</div>
                            <div class="info-item">
                                <el-input
                                        type="textarea"
                                        v-model="item.desc"
                                        :autosize="true"
                                        resize="none"
                                        class="showTextConter"
                                        readonly
                                >

                                </el-input>
                            </div>
                        </div>
                    </div>

                </div>
            </el-col>
        </div>
        <!--对话框-显示大图-->
        <el-dialog title="显示大图" :visible.sync="big_img_dialog.show">
            <img class="big-img" :src="big_img_dialog.path">
        </el-dialog>
    </section>
</template>

<script>
    import * as api from '../../api/records_api'
    import dict from '../../common/js/dict';

    export default {
        props: ["id", 'resource_url', "receiverCount", "tempData"],
        data() {
            return {
                loading: false,
                big_img_dialog: {
                    show: false,
                    path: ''
                },
                //表格数据
                recordsData: {
                    id: '',
                    check_unit_name: '',
                    check_unit_logo: '',
                    check_user_name: '',
                    check_desc_count: 0, // 检查项数量
                    check_desc_unqualified_count: 0, // 不合格数量
                    status_1_count: 0, // 待改进
                    status_2_count: 0, // 有亮点
                    status_0_count: 0, // 不合格
                    check_status: '', // 检查作业状态 0-未提交；1-已提交；2-打回
                    gmt_modified: '', // 更新时间
                    suggestion: '',
                    check_desc_list: []
                }
            }
        },
        methods: {
            showImg(path) {
                this.big_img_dialog.path = this.fixUrl(path);
                this.big_img_dialog.show = true;
            },
            cancel(){
                this.$emit("closeDialog");
            },
            submit() {
                this.$confirm('作业提交后不可撤回，确认提交此作业吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,   //不通过点击遮罩关闭弹框
                    type: 'info'
                }).then(() => {

                    let params = {
                        id: this.id,
                        suggestion: this.recordsData.suggestion,
                        check_desc_list: this.recordsData.check_desc_list,
                        deleted_desc_id: this.recordsData.deleted_desc_id,
                        is_submit: "1"
                    };


                    api.updateRecords(params).then((res) => {
                        if (res.data.status == 200) {

                            this.$message({
                                type: 'success',
                                message: '提交作业成功!'
                            });

                            this.$router.push('/records/list');
                        } else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.status + " " + res.data.msg);
                        }
                    });

                }).catch((e) => {
                    /*this.$message({
                        type: 'info',
                        message: e.message
                    });*/
                });
            },

            formatCyc(status) {

                switch (status.toString()) {
                    case '0':
                        return 'red';
                    case '2':
                        return 'green';
                    case '1':
                    default:
                        return 'orange';
                }
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            fixUrl(url) {
                if (url && url.length > 0 && url.toLowerCase().indexOf("http:") != 0) {
                    return this.resource_url + url;
                }
                return url;
            },
            //初始化页面
            initData() {
                let params = {
                    id: this.$route.params.id
                };
                api.getRecordsDetail(params).then((res) => {
                    if (res.data.status == 200) {
                        let data = JSON.parse(res.data.datas).edit;
                        if (data) {
                            data.check_desc_count = 0;
                            data.status_2_count = 0;
                            data.status_1_count = 0;
                            data.status_0_count = 0;

                            if (data.check_desc_list && data.check_desc_list.length > 0) {
                                for (let i = 0; i < data.check_desc_list.length; i++) {
                                    let status = data.check_desc_list[i].check_content_status;
                                    data.check_desc_count++;
                                    switch (status) {
                                        case "0":
                                            data.status_0_count++;
                                            break;
                                        case "1":
                                            data.status_1_count++;
                                            break;
                                        case "2":
                                            data.status_2_count++;
                                            break;
                                        default:
                                            break;
                                    }
                                }
                            }

                        }
                        if(data.check_desc_list){
                            data.check_desc_list = data.check_desc_list.sort(function (a, b) {
                                return a.check_item_three_item_order - b.check_item_three_item_order;
                            });
                        }

                        this.recordsData = data;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });

                //this.recordsData = this.tempData;
            }
        },
        watch: {
            receiverCount(cur) {
                this.initData();
            },
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>
    .head-item {
        margin-bottom: 15px;
        text-align: left;
        color: #000;
    }

    .head-title {
        display: inline-block;
        text-align: right;
        margin-right: 10px;
        font-weight: bold;
    }

    .head-val {
        display: inline-block;
        color: #666;
        line-height:10px;
        width: 80px;
    }

    .section {
        margin-top: 15px;
        padding-bottom: 15px;
    }

    .cyc {
        border-radius: 5px;
        width: 10px;
        height: 10px;
        display: inline-block;
        display: -webkit-inline-box;
    }

    .cyc-margin {
        margin: 0 5px 0 10px;
    }

    .cyc-green {
        background-color: #7ED321;
    }

    .cyc-orange {
        background-color: #F5A623;
    }

    .cyc-red {
        background-color: #D0021B;

    }

    .body-item {
        margin-top: 25px;
    }

    .body-title {
        margin-top: 10px;
        font-weight: bold;
        color: #000;
    }

    .body-val {
        padding: 10px 0;
        min-height: 50px;
    }

    .body-inspect {
        margin-top: 10px;
        border: solid 1px #eceaea;
        padding: 20px 30px;
        margin-bottom: 15px;
    }

    .inspect-title {
        font-size:16px;
        color:#000;
    }

    .star {
        margin: 0 3px;
    }

    .inspect-info {

    }

    .info-title {
        margin-top: 25px;
        font-weight: bold;
        color: #000;
    }

    .info-img,
    .info-item {
        margin-top: 10px;
    }

    .info-img img {
        cursor: pointer;
        height: 75px;
        width: 75px;
        margin-right: 10px;
        display: inline-block;
    }

    .info-item {
    }

    .big-img {
        max-width: 100%;
    }
</style>
